<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingTop: '10px', paddingBottom: '14px' }">
      <template #title> 热门作者榜单 </template>
      <template #extra>
        <a-link>查看榜单</a-link>
      </template>
      <a-table :data="tableData" :pagination="false" :bordered="false" style="margin-bottom: 20px" :scroll="{ x: '100%', y: '350px' }">
        <template #columns>
          <a-table-column title="排名" data-index="ranking" :width="80"> </a-table-column>
          <a-table-column title="作者" data-index="author"> </a-table-column>
          <a-table-column
            title="内容量"
            data-index="contentCount"
            :sortable="{
              sortDirections: ['ascend', 'descend'],
            }">
          </a-table-column>
          <a-table-column
            title="点击量"
            data-index="clickCount"
            :sortable="{
              sortDirections: ['ascend', 'descend'],
            }">
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </a-spin>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAppStore } from '@/store'

const appStore = useAppStore()

const tableData = ref([])
const loading = ref(false)

onMounted(async () => {
  tableData.value = [
    {
      ranking: '1',
      author: '怀空',
      contentCount: 8285,
      clickCount: 4219,
    },
    {
      ranking: '2',
      author: '聂风',
      contentCount: 8134,
      clickCount: 8330,
    },
    {
      ranking: '3',
      author: '步惊云',
      contentCount: 2064,
      clickCount: 6066,
    },
    {
      ranking: '4',
      author: '断浪',
      contentCount: 8684,
      clickCount: 7980,
    },
    {
      ranking: '5',
      author: '笑三少',
      contentCount: 694,
      clickCount: 3167,
    },
    {
      ranking: '6',
      author: '无名',
      contentCount: 1663,
      clickCount: 8857,
    },
    {
      ranking: '7',
      author: '剑圣',
      contentCount: 8684,
      clickCount: 1583,
    },
  ]
})
</script>

<style scoped lang="less">
.general-card {
  max-height: 425px;
  border-radius: 4px;
  border: none;

  :deep(.arco-card-header) {
    height: auto;
    padding: 20px;
    border: none;
  }
}
</style>
